// UI类封装
var UI = {
    alert: function(obj) {
        // 加载模态框的方法
        var title = (obj == undefined || obj.title == undefined) ? '系统消息' : obj.title;
        var msg = (obj == undefined || obj.msg == undefined) ? '' : obj.msg;
        var icon = (obj == undefined || obj.icon == undefined) ? 'warn' : obj.icon;
        var html = '<div id="UI_alert_sm" class="modal fade" tabindex="-1" role="dialog">\
                    <div class="modal-dialog modal-sm" role="document">\
                        <div class="modal-content">\
                        <div class="modal-header">\
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
                            <h4 class="modal-title">' + title + '</h4>\
                        </div>\
                        <div class="modal-body">\
                            <p><img src="static/img/' + icon + '.png" width="32" height="32" style="margin-right:5px;"/>' + msg + '</p>\
                        </div>\
                        <div class="modal-footer">\
                            <button type="button" class="btn btn-primary" onclick="$(\'#UI_alert_sm\').modal(\'hide\')">确定</button>\
                        </div>\
                        </div>\
                    </div>\
                </div>';

        $('body').append(html);
        $('#UI_alert_sm').modal({ backdrop: 'static' }); //点击背景不消失
        $('#UI_alert_sm').modal('show'); //显示模态框
        // 此事件在模态框被隐藏（ 并且同时在 CSS 过渡效果完成） 之后被触发
        $('#UI_alert_sm').on('hidden.bs.modal', function(e) {
            $('#UI_alert_sm').remove();
        });
    },
    open: function(obj) {
        // 加载页面
        var title = (obj == undefined || obj.title == undefined) ? '' : obj.title;
        var url = (obj == undefined || obj.url == undefined) ? '' : obj.url;
        var width = (obj == undefined || obj.width == undefined) ? '550' : obj.width;
        var height = (obj == undefined || obj.height == undefined) ? '450' : obj.height;

        var html = '<div id="UI_open_lg" class="modal fade" tabindex="-1" role="dialog">\
        <div class="modal-dialog modal-lg" role="document">\
            <div class="modal-content">\
            <div class="modal-header">\
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
                <h4 class="modal-title">' + title + '</h4>\
            </div>\
            <div class="modal-body">\
            <iframe src="' + url + '" width="100%" height="100%" frameborder="0"></iframe>\
        </div>\
            </div>\
        </div>\
    </div>';

        $('body').append(html);
        $('#UI_open_lg .modal-dialog').css('width', width + 'px');
        $('#UI_open_lg .modal-body').css('height', height + 'px');
        $('#UI_open_lg').modal({ backdrop: 'static' }); //点击背景不消失
        $('#UI_open_lg').modal('show'); //显示模态框
        // 此事件在模态框被隐藏（ 并且同时在 CSS 过渡效果完成） 之后被触发
        $('#UI_open_lg').on('hidden.bs.modal', function(e) {
            $('#UI_open_lg').remove();
        });

    }
}